'use client'

import { useState } from 'react'
import {
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  Button,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  FormControl,
  FormLabel,
  Switch,
  Select,
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
  VStack,
  HStack,
  Text,
  useColorMode,
  useToast
} from '@chakra-ui/react'

interface SettingsModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialSettings?: {
    theme: 'light' | 'dark' | 'system';
    fontSize: number;
    fontFamily: string;
    aiModel: string;
    autoSave: boolean;
    saveInterval: number;
  };
  onSaveSettings: (settings: any) => void;
}

export const SettingsModal = ({
  isOpen,
  onClose,
  initialSettings = {
    theme: 'system',
    fontSize: 18,
    fontFamily: 'Georgia',
    aiModel: 'gpt-4',
    autoSave: true,
    saveInterval: 60
  },
  onSaveSettings
}: SettingsModalProps) => {
  const [settings, setSettings] = useState(initialSettings)
  const { colorMode, setColorMode } = useColorMode()
  const toast = useToast()
  
  const handleSave = () => {
    onSaveSettings(settings)
    toast({
      title: '设置已保存',
      status: 'success',
      duration: 2000,
      isClosable: true,
      position: 'top'
    })
    onClose()
  }
  
  const handleReset = () => {
    setSettings(initialSettings)
  }
  
  return (
    <Modal isOpen={isOpen} onClose={onClose} size="lg">
      <ModalOverlay />
      <ModalContent>
        <ModalHeader>设置</ModalHeader>
        <ModalCloseButton />
        
        <ModalBody>
          <Tabs variant="enclosed">
            <TabList>
              <Tab>编辑器</Tab>
              <Tab>AI助手</Tab>
              <Tab>外观</Tab>
              <Tab>高级设置</Tab>
            </TabList>
            
            <TabPanels>
              {/* 编辑器设置 */}
              <TabPanel>
                <VStack spacing={4} align="stretch">
                  <FormControl>
                    <FormLabel>字体大小</FormLabel>
                    <HStack>
                      <Slider 
                        value={settings.fontSize} 
                        min={12} 
                        max={28} 
                        step={1}
                        onChange={(v) => setSettings({...settings, fontSize: v})}
                        flex="1"
                      >
                        <SliderTrack>
                          <SliderFilledTrack />
                        </SliderTrack>
                        <SliderThumb />
                      </Slider>
                      <NumberInput 
                        value={settings.fontSize} 
                        min={12} 
                        max={28}
                        w="70px"
                        onChange={(_, v) => setSettings({...settings, fontSize: v})}
                      >
                        <NumberInputField />
                        <NumberInputStepper>
                          <NumberIncrementStepper />
                          <NumberDecrementStepper />
                        </NumberInputStepper>
                      </NumberInput>
                    </HStack>
                  </FormControl>
                  
                  <FormControl>
                    <FormLabel>字体</FormLabel>
                    <Select 
                      value={settings.fontFamily}
                      onChange={(e) => setSettings({...settings, fontFamily: e.target.value})}
                    >
                      <option value="Georgia">Georgia</option>
                      <option value="Times New Roman">Times New Roman</option>
                      <option value="Arial">Arial</option>
                      <option value="Verdana">Verdana</option>
                    </Select>
                  </FormControl>
                  
                  <FormControl display="flex" alignItems="center">
                    <FormLabel mb="0">自动保存</FormLabel>
                    <Switch 
                      isChecked={settings.autoSave}
                      onChange={(e) => setSettings({...settings, autoSave: e.target.checked})}
                      colorScheme="red"
                    />
                  </FormControl>
                  
                  {settings.autoSave && (
                    <FormControl>
                      <FormLabel>保存间隔（秒）</FormLabel>
                      <NumberInput 
                        value={settings.saveInterval} 
                        min={10} 
                        max={300}
                        onChange={(_, v) => setSettings({...settings, saveInterval: v})}
                      >
                        <NumberInputField />
                        <NumberInputStepper>
                          <NumberIncrementStepper />
                          <NumberDecrementStepper />
                        </NumberInputStepper>
                      </NumberInput>
                    </FormControl>
                  )}
                </VStack>
              </TabPanel>
              
              {/* AI设置 - 简化的示例 */}
              <TabPanel>
                <FormControl>
                  <FormLabel>AI模型</FormLabel>
                  <Select 
                    value={settings.aiModel}
                    onChange={(e) => setSettings({...settings, aiModel: e.target.value})}
                  >
                    <option value="gpt-4">GPT-4</option>
                    <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                    <option value="claude-2">Claude 2</option>
                  </Select>
                </FormControl>
              </TabPanel>
              
              {/* 外观设置 */}
              <TabPanel>
                <FormControl>
                  <FormLabel>主题</FormLabel>
                  <Select 
                    value={settings.theme}
                    onChange={(e) => {
                      const theme = e.target.value as 'light' | 'dark' | 'system';
                      setSettings({...settings, theme});
                      if (theme !== 'system') {
                        setColorMode(theme);
                      } else {
                        // 处理系统偏好
                        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                        setColorMode(prefersDark ? 'dark' : 'light');
                      }
                    }}
                  >
                    <option value="light">浅色</option>
                    <option value="dark">深色</option>
                    <option value="system">系统默认</option>
                  </Select>
                </FormControl>
              </TabPanel>
              
              {/* 高级设置 - 占位符 */}
              <TabPanel>
                <Text>高级设置选项</Text>
              </TabPanel>
            </TabPanels>
          </Tabs>
        </ModalBody>
        
        <ModalFooter>
          <Button variant="outline" mr={3} onClick={handleReset}>
            重置
          </Button>
          <Button colorScheme="red" onClick={handleSave}>
            保存修改
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  )
}
